@extends('layouts.blank')

@section('title')
登录
@endsection

@section('css')
<style>
[v-cloak] {
  display: none;
}
#layout-app {
  background-color: #242743;
  position: absolute;
  width: 100%;
  height: 100%;
}
.login-panel {
  width: 380px;
  height: 540px;
  position: absolute !important;
  top:0;
  right: 10%;
  bottom: 0;
  margin:auto;
}
.login-panel .title {
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 28px;
}
.login-panel .input {
  width: 100%;
  margin-top: 20px;
}
.login-panel .input:first {
  margin-top: 50px;
}
.login-btn {
  margin-top: 50px;
}
.copy-right {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 10px;
  left: 0;
  color: #808695;
}
</style>
@endsection

@section('content')
<div id="layout-app" v-cloak>
  <Card :shadow="true" class="login-panel">
    <div style="text-align:center">
      <h3 class="title">总后台登录</h3>

      <i-input placeholder="用户名 手机号或者邮箱" size="large" class="input">
        <i class="iconfont icon-usercenter" slot="prefix"></i>
      </i-input>

      <i-input placeholder="密码" type="password" password size="large" class="input">
        <i class="iconfont icon-password" slot="prefix"></i>
      </i-input>

      <i-button type="primary" long size="large" class="login-btn">登 录</i-button>
    </div>

    <small class="copy-right">&copy; 2020</small>
  </Card>
</div>
@endsection

@section('script')
<script>
const vm = new Vue({
  el: "#layout-app",

});
</script>
@endsection
